<template>
  <div class="">
    <!--头部 -->
    <MyNav :navList="navList"></MyNav>
    <!-- 列表 -->
    <MyTable></MyTable>
  </div>
</template>

<script>
import MyNav from "../components/myNav.vue";
import MyTable from "../components/myTable.vue";
import axios from "axios";
import { reactive, toRefs } from "vue";
export default {
  setup() {
    let obj = reactive({
      navList: [],
    });
    axios.get("data.json").then((res) => {
      res.data.forEach((item) => {
        // 将数组扁平化一下
        item.values = item.values.flat(Infinity);
      });
      obj.navList = res.data;
      console.log(obj.navList);
    });

    return { ...toRefs(obj) };
  },

  components: { MyNav, MyTable },
};
</script>

<style lang="scss" scoped></style>
